import React, {useEffect} from 'react';
import './index.less';

import echarts from 'echarts/lib/echarts';
import 'echarts-liquidfill'

import EchartBase from '../echartBase';

const AmountChart = (props) => {
	const {ele} = props;
	const gaugeOption = {
		backgroundColor: 'transparent',
		series: [{
			type: 'liquidFill',
			radius: '90%',  // 半径大小
			center: ['50%', '50%'],    // 布局位置
			data:[0.68, 0.38], // 水球波纹值
			backgroundStyle: {
				borderWidth: 0, //内边框宽度
				borderColor: 'transparent', //背景内边框
				color: 'transparent', //背景颜色
			},
			label: { //To change the text, you may use label.formatter, which can be set to a string or function.
				normal: {
					formatter: `年完成率\n\n${ele.rt_complete_year}\n\n%`, //If it is a string, {a} series name, {b} data name,{c} data value.
					textStyle: {
						color: '#fefefe', //波浪上文本颜色
						fontSize: 18,
						fontWeight: 400
					},
				}
			}
		}]
	};

	const amountDayOption = () => {
		const option = {
			series: [{
				type: 'pie',
				zlevel: 1,
				silent: true,
				radius: ['98%', '97%'],
				hoverAnimation: false,
				color: "rgba(88,142,197,0.5)",
				// animation:false,    //charts3 no
				label: {
					normal: {
						show: false
					},
				},
				labelLine: {
					normal: {
						show: false
					}
				},
				data: [1]
			}, {
				type: 'pie',
				zlevel: 2,
				silent: true,
				radius: ['90%', '91%'],
				startAngle: 50,
				hoverAnimation: false,
				// animation:false,    //charts3 no
				label: {
					normal: {
						show: false
					},
				},
				labelLine: {
					normal: {
						show: false
					}
				},
				data: _pie2()
			},
				{
					type: 'pie',
					zlevel: 3,
					silent: true,
					radius: ['88%', '87%'],
					label: {
						normal: {
							show: false
						},
					},
					labelLine: {
						normal: {
							show: false
						}
					},
					data: _pie2()
				},
				{
					type: 'pie',
					zlevel: 4,
					silent: true,
					radius: ['84%', '83%'],
					label: {
						normal: {
							show: false
						},
					},
					labelLine: {
						normal: {
							show: false
						}
					},
					data: _pie3()
				}, {
					type: 'pie',
					zlevel: 5,
					silent: true,
					radius: ['80%', '78%'],
					color: ["#fc8d89", "#46d3f3", "rgba(203,203,203,.2)"],
					startAngle: 50,
					hoverAnimation: false,
					// animation:false,    //charts3 no
					label: {
						normal: {
							show: false
						},
					},
					data: [50, 20, 40]
				},
				{
					name: '统计',
					type: 'gauge',
					// splitNumber: 30, //刻度数量
					// min: 0,
					// max: 100,
					// radius: '68%', //图表尺寸
					center: ['50%', '50%'],
					startAngle: 90,
					endAngle: -269.9999,
					axisLine: {
						show: false,
					},
					axisTick: {
						show: false,
					},
					splitLine: {
						show: false,
					},
					axisLabel: {
						show: false
					},
					pointer: { //仪表盘指针
						show: 0,
					},
					title: { //标题
						show: true,
						offsetCenter: [0, -36], // x, y，单位px
						textStyle: {
							color: "#f0f0f0",
							fontSize: 18, //表盘上的标题文字大小
							fontWeight: 400,
							fontFamily: 'PingFangSC'
						}
					},
					detail: {
						borderColor: '#fff',
						shadowColor: '#fff', //默认透明
						shadowBlur: 2,
						offsetCenter: [0, 20], // x, y，单位px
						textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
							color: '#f0f0f0',
							fontSize: 18,
						},
						formatter: (value) => {
							return `${value}\n\nkWh`;
						}
					},
					data: [{
						name: "日发电量",
						value: ele.rt_real_kwh_day
					}]
				}
			]
		};

		function _pie1() {
			let dataArr = [];
			for (var i = 0; i < 8; i++) {

				dataArr.push({
					name: (i + 1).toString(),
					value: 20,
					itemStyle: {
						normal: {
							color: "rgba(88,142,197,0.4)",
							borderWidth: 0,
							borderColor: "rgba(0,0,0,0)"
						}
					}
				})

			}
			return dataArr

		}

		function _pie2() {
			let dataArr = [];
			for (var i = 0; i < 8; i++) {
				if (i % 2 === 0) {
					dataArr.push({
						name: (i + 1).toString(),
						value: 25,
						itemStyle: {
							normal: {
								color: "rgba(88,142,197,0.5)",
								borderWidth: 0,
								borderColor: "rgba(0,0,0,0)"
							}
						}
					})
				} else {
					dataArr.push({
						name: (i + 1).toString(),
						value: 20,
						itemStyle: {
							normal: {
								color: "rgba(0,0,0,0)",
								borderWidth: 0,
								borderColor: "rgba(0,0,0,0)"
							}
						}
					})
				}

			}
			return dataArr

		}

		function _pie3() {
			let dataArr = [];
			for (var i = 0; i < 100; i++) {
				if (i % 2 === 0) {
					dataArr.push({
						name: (i + 1).toString(),
						value: 25,
						itemStyle: {
							normal: {
								color: "rgb(126,190,255)",
								borderWidth: 0,
								borderColor: "rgba(0,0,0,0)"
							}
						}
					})
				} else {
					dataArr.push({
						name: (i + 1).toString(),
						value: 20,
						itemStyle: {
							normal: {
								color: "rgba(0,0,0,0)",
								borderWidth: 0,
								borderColor: "rgba(0,0,0,0)"
							}
						}
					})
				}

			}
			return dataArr

		}

		return option;
	}

	return (
		<>
		{
			Object.keys(ele).length &&
			<section className={'amount-chart'} >
				<EchartBase
					titleStyle={{marginLeft:'-80px'}}
					title={'日发电量'}
					style={{
						width: '180px',height:'200px'
					}}
					options={amountDayOption()}
					id="amountDay"
				/>
				<EchartBase
					titleStyle={{marginLeft:'-80px'}}
					title={'年完成率'}
					style={{
						width: '180px',height:'200px'
					}}
					options={gaugeOption}
					id="gauge"
				/>
			</section>
		}
		</>

	)
}

export default AmountChart